<template>
  <s-modal title="详情" :visible="visible" width="800px" :footer="null" @cancel="visible = false">
    <div style="height: 400px">
      <s-scroll>
        <s-form :value="formValue">
          <s-form-item label="用户账号">
            <s-input v-model="formValue.userName" disabled placeholder="用户账号" />
          </s-form-item>
          <s-form-item label="昵称">
            <s-input v-model="formValue.nickName" disabled allow-clear placeholder="昵称" />
          </s-form-item>
          <s-form-item label="所属部门">
            <s-select-tree
              v-model="formValue.orgId"
              disabled
              placeholder="请选择"
              url="/realm/dept/selectList"
              value-field="id"
              label-field="text"
              :allow-clear="true"
            />
          </s-form-item>
          <s-form-item label="角色" name="roles">
            <s-select
              v-model="formValue.roles"
              height="200px"
              disabled
              url="/authority/role/selectList"
              value-field="value"
              label-field="text"
              mode="multiple"
              placeholder="角色"
            />
          </s-form-item>
          <s-form-item label="菜单" name="menu">
            <s-select
              v-model="formValue.menu"
              height="200px"
              disabled
              url="/menu/template/selectList"
              value-field="id"
              label-field="templateName"
              placeholder="菜单"
            />
          </s-form-item>
          <s-form-item label="手机号">
            <s-input v-model="formValue.phone" disabled allow-clear placeholder="手机号" />
          </s-form-item>
          <s-form-item label="邮箱">
            <s-input v-model="formValue.email" disabled allow-clear placeholder="邮箱" />
          </s-form-item>
          <s-form-item label="创建人">
            <s-input v-model="formValue.createByAccount" disabled />
          </s-form-item>
          <s-form-item label="创建时间">
            <s-input v-model="formValue.createDate" disabled />
          </s-form-item>
          <s-form-item label="修改人">
            <s-input v-model="formValue.updateByAccount" disabled />
          </s-form-item>
          <s-form-item label="修改时间">
            <s-input v-model="formValue.updateDate" disabled />
          </s-form-item>
          <s-form-item label="头像">
            <s-img v-model="formValue.headPortrait" disabled :max="1" />
          </s-form-item>
        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
export default {
  name: 'Detail',
  data() {
    return {
      formValue: {},
      visible: false
    }
  },
  methods: {
    open(id) {
      this.$loading(true)
      this.$api
        .GET('/realm/user/selectOneById', { id: id })
        .then((res) => {
          if (!res.data) {
            this.$loading(false)
            this.visible = false
            this.$message.warn('数据不存在')
          } else {
            this.formValue = res.data
            this.$loading(false)
            this.visible = true
          }
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
